<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width;">
    <meta charset='UTF-8'>
    <base href="#" target="">
    <title>HomeWork28_01</title>
    <link rel="stylesheet" type="text/css" href="../src/css/grid.css">
    <link rel="stylesheet" type="text/css" href="../src/css/nav-bar.css">
    <link rel="stylesheet" type="text/css" href="../src/css/style.css">
    <link rel="stylesheet" type="text/css" href="../src/css/form.css">
    <link rel="stylesheet" type="text/css" href="../src/css/table.css">
    <script src="../src/js/switchPanel.js"></script>
</head>

<body class="margin0 padding0">
    <div class="row bg-shadow bg-dodger fg-white">
        <div class="container bg-shadow">
            <div class="span12">
                <h1 class="font4 margin-left30">图书管理系统</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="container">
            <div class="span3">
                <div class="row margin30">
                    <div class="nav-bar-v bg-shadow">
                        <span class="title">操作菜单</span>
                        <ul>
                            <li>
                                <a onclick="switchPanel('panel01')" href="">添加图书</a>
                                <a onclick="switchPanel('panel02')" href="">查看图书</a>
                            </li>
                        </ul>
                        <div class="margin-top10"></div>
                    </div>
                </div>
            </div>
            <div class="span9 font-gray">
                <div class="row margin-top30 padding-right40">
                    <div class="bg-shadow-light">
                        <div id="panel01">
                            <div class="row">
                                <div class="span12">
                                    <h1 class="font-large margin0" style="margin: 4px;">添加图书</h1>
                                </div>
                            </div>
                            <div class="row">
                                <div class="span12">
                                    <div class="form">
                                        <form action="" method="">
                                            <div class="row">
                                                <div class="key span2">
                                                    书名:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    作者:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    出版社:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    内容简介:
                                                </div>
                                                <div class="value span10">
                                                    <textarea rows="5" cols="40"></textarea>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                </div>
                                                <div class="value span10">
                                                    <input class="button" type="submit" name="" value="提交">
                                                    <input class="button" type="reset" name="" value="重置">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end of panel01-->
                        <div id="panel02" style="display: none;">
                            <div class="row">
                                <div class="span12">
                                    <h1 class="font-large margin0" style="margin: 4px;">查看图书</h1>
                                </div>
                            </div>
                            <div class="row">
                                <div class="span12">
                                    <table class="margin-left10">
                                        <thead>
                                            <tr>
                                                <td>ID</td>
                                                <td>书名</td>
                                                <td>作者</td>
                                                <td>出版社</td>
                                                <td>出版日期</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                            </tr>
                                            <tr>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                            </tr>
                                            <tr>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>test</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!--end of panel02-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>